<template>
	<view>

		<!-- 列表 -->
		<view v-if="listdata.length!==0" v-for="(item,index) in listdata" :key="index" @click="chufa(item)"
			class="listbox">
			<view v-if="item.default_addr==true" class="listbox_bg"></view>
			<view class="flex ac" style="font-size: 31rpx;margin-bottom: 20rpx;">
				<view>{{item.name}}</view>
				<view style="margin-left: 25rpx;">{{item.phone}}</view>
			</view>
			<view style="font-size: 26rpx;color:#777777;">{{item.province}}{{item.city}}{{item.county}}{{item.addr}}
			</view>
			<view class="flex ac" style="margin-top: 20rpx;">
				<view class="flex ac" @click.stop="lata(item,index)">
					<image v-if="item.default_addr==false" style="width: 40rpx;height: 40rpx;"
						src="../../static/icon/aa/choice.png"></image>
					<image v-else style="width: 40rpx;height: 40rpx;" src="../../static/icon/aa/choice-icon.png">
					</image>
					<view style="font-size: 26rpx;color: #5C5C5C;margin-left: 15rpx;">设为默认</view>
				</view>
				<view style="flex: 1;"></view>
				<image @click.stop="details(item.id)" style="width: 40rpx;height: 40rpx;margin-right: 30rpx;"
					src="../../static/icon/aa/write.png">
				</image>
				<image @click.stop="deletea(item.id)" style="width: 40rpx;height: 40rpx;"
					src="../../static/icon/aa/delete.png">
				</image>
			</view>
		</view>

		<!-- 暂无订单 -->
		<view v-if="listdata.length==0" class="nodatabox">
			<image style="width: 278rpx;" mode="widthFix" src="../../static/icon/aa/nodata3.png"></image>
			<view class="nodatatext">请添加您的收货地址</view>
		</view>

		<!-- 新增地址 -->
		<view class="buttombox">
			<view class="buttomview" @click="add">添加新地址</view>
		</view>

		<!-- 弹窗样式 -->
		<u-popup v-model="show" mode="center" border-radius="20">
			<view style="width: 600rpx;">
				<view class="popuptitle">是否删除该地址？</view>
				<view class="popupview flex ac jb">
					<view class="popupbuttom popup-cancel" @click="decancel">取消</view>
					<view class="popupbuttom popup-delete" @click="deleted">删除</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		request
	} from "@/static/common.js";
	export default {
		data() {
			return {
				ids: '',
				show: false,
				listdata: []
			}
		},

		onShow(e) {
			var that = this
			if (uni.getStorageSync("update_quedindel")) {
				that.listaddr()
				uni.removeStorageSync('update_quedindel')
			}
		},

		onLoad() {
			this.listaddr()
		},

		methods: {
			chufa(e) {
				//保存address
				getApp().globalData.address = e
				uni.setStorageSync('address', getApp().globalData.address)
				uni.setStorageSync("update_data", 1)
				uni.navigateBack()
			},

			async listaddr(e) {
				let apply = await request(`${getApp().globalData.http}user/list_addr`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "GET", {
					token: getApp().globalData.token,
				})
				if (apply.data.code == 0) {
					this.listdata = apply.data.data
					if (this.listdata.length == 1) {
						//保存address
						getApp().globalData.address = this.listdata[0]
						uni.setStorageSync('address', getApp().globalData.address)
						uni.setStorageSync("update_data", 1)
					}
					if (this.listdata.length == 0) {
						//保存address
						getApp().globalData.address = []
						uni.setStorageSync('address', getApp().globalData.address)
						uni.setStorageSync("update_data", 1)
					}

				} else {
					uni.showToast({
						title: `${apply.data.message}`,
						icon: "none",
					})
				}
			},

			//打开删除弹窗
			deletea(e) {
				this.ids = e
				this.show = true
			},

			//关闭删除弹窗
			decancel(e) {
				this.ids = ''
				this.show = false
			},

			//添加新地址
			add(e) {
				uni.navigateTo({
					url: '/pages/fillintheaddress/fillintheaddress?type=' + 1
				})
			},

			//修改地址
			details(id) {
				uni.navigateTo({
					url: '/pages/fillintheaddress/fillintheaddress?type=' + 2 + '&id=' + id
				})
			},

			//删除地址列表数据
			async deleted(e) {
				let apply = await request(`${getApp().globalData.http}user/del_addr`, {
					// "Content-Type": "application/x-www-form-urlencoded"
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "POST", {
					token: getApp().globalData.token,
					addr_id: this.ids,
				})
				if (apply.data.code == 0) {
					uni.showToast({
						title: `${apply.data.message}`,
						icon: "none",
					})
					this.decancel()
					this.listaddr()
				} else {
					uni.showToast({
						title: `${apply.data.message}`,
						icon: "none",
					})
				}
			},

			lata(zhi, index) {
				for (var i = 0; i < this.listdata.length; i++) {
					if (this.listdata[i].id == zhi.id) {
						this.listdata[i].default_addr = true
						this.updateaddr(zhi)
					} else {
						this.listdata[i].default_addr = false
					}
				}
			},

			//默认地址
			async updateaddr(value) {
				let apply = await request(`${getApp().globalData.http}user/update_addr`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "POST", {
					token: getApp().globalData.token,
					addr_id: value.id,
					name: value.name,
					phone: value.phone,
					province: value.province,
					city: value.city,
					county: value.county,
					region: '',
					addr: value.addr,
					label: '',
					default_addr: 1,
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F8FAFC;
		padding: 20rpx;
	}

	// 列表
	.listbox {
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx 20rpx;
		margin-bottom: 20rpx;
		position: relative;
	}

	.listbox_bg {
		width: 139rpx;
		height: 60rpx;
		background: url('../../static/moren.png');
		position: absolute;
		top: 0rpx;
		right: 20rpx;
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: 100% auto;
	}

	// 暂无订单
	.nodatabox {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding-top: 188rpx;
	}

	.nodatatext {
		font-size: 28rpx;
		color: #878787;
		margin: 20rpx 0;
	}

	.nodataborder {
		border: 1px solid #e5e5e5;
		font-size: 28rpx;
		color: #353535;
		padding: 15rpx 50rpx;
		border-radius: 50rpx;
		background-color: #ffffff;
		margin-top: 20rpx;
	}

	.buttombox {
		width: 100%;
		height: 160rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.buttomview {
		width: 500rpx;
		height: 90rpx;
		color: #ffffff;
		background-color: #353535;
		border-radius: 50rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: 33rpx;
	}

	// 弹窗
	.popuptitle {
		text-align: center;
		font-size: 36rpx;
		color: #424040;
		margin-top: 50rpx;
		margin-bottom: 50rpx;
	}

	.popupview {
		padding: 20rpx 30rpx 70rpx 30rpx;
	}

	.popupbuttom {
		width: 250rpx;
		height: 80rpx;
		border-radius: 50rpx;
		background-color: red;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
	}

	.popup-cancel {
		background-color: #D7E2EF;
		color: #2D2D2D;
	}

	.popup-delete {
		background-image: linear-gradient(270deg, #FF6144 15%, #FF99C9 100%);
		color: #ffffff;
	}
</style>